<template>
  <div class="student">
    <div>
      <div class="title">
        <h1 style="color: #4D7181;font-size: 40px">管理宣讲会</h1>
        <div>
          <PlaySquareOutlined class="icon"/>
          <AppstoreAddOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #4D7181; padding: 20px;border-top: 30px solid #4D7181; border-radius: 20px">
      <a-modal v-model:open="open" :confirm-loading="confirmLoading" title="编辑宣讲会状态"  ok-text="确认" cancel-text="取消" @ok="handleOk">
        <div>
          是否-封禁:&nbsp;&nbsp;&nbsp;
          <a-radio-group v-model:value="userStatus" buttonStyle="solid">
            <a-radio-button value="1">封禁</a-radio-button>
            <a-radio-button value="0">正常</a-radio-button>
          </a-radio-group>
        </div>
      </a-modal>
      <a-table :columns="columns" :data-source="dataSource" bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'videoAdminStatus'">
            <span :style="{ color: getStatusColor(record.videoAdminStatus) }">{{ getStatusText(record.videoAdminStatus) }}</span>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button class="a-button" type="primary" @click="showModal(record.videoId,record.videoAdminStatus)">编辑</a-button>

            <router-link :to="{path:'/admin/manage/video/info/'+record.videoId}">
              <a-button class="a-button" style="color: white;background-color: #67C23A">查看</a-button>
            </router-link>

          </template>
        </template>
      </a-table>
    </div>
  </div>

</template>
<script setup>
import {AppstoreAddOutlined, PlaySquareOutlined} from '@ant-design/icons-vue';
import { onMounted, ref} from 'vue';
import {message} from "ant-design-vue";
import {pageVideoAPI, updateVideoAdminStatusAPI, updateVideoStatusAPI} from "@/apis/video.js";
const columns = [
  {
    title: '宣讲会名称',
    dataIndex: 'videoName',
    width: "auto",
  },
  {
    title: '宣讲会管理状态',
    dataIndex: 'videoAdminStatus',
    width: "auto",

  },
  {
    title: '公司名称',
    dataIndex: 'videoCompanyName',
    width: "auto",
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: "200px",
  },
];
//控制专题
const getStatusText = (status) => {
  return status === 0? '正常' : '封禁';
};
const getStatusColor = (status) => {
  return status === 0? 'green' : 'red';
};
const dataSource = ref();
//获取数据
const data = ref({pageCurrent: 1, pageSize: 10});
const getData = async (data) => {
  const res = await pageVideoAPI(data)
  dataSource.value = res.data.data.data;
}
//生命周期
onMounted(() => {
  getData(data);
});


//编辑弹窗
const userStatus = ref();
const open = ref(false);
const confirmLoading = ref(false);
//学生id和学生绑定的用户id
const videoId = ref();
const showModal = async (key,videoAdminStatus) => {
  videoId.value=key;
  userStatus.value= String(videoAdminStatus);
  open.value = true;
};
const handleOk = async () => {
  confirmLoading.value = true;
  //修改页面
  const res = await updateVideoAdminStatusAPI(videoId.value, userStatus.value)
  if (res.data.flag === true) {
    success(res.data.message);
  }
  setTimeout(() => {
    //重新获取数据和关闭弹窗
    getData(data);
    confirmLoading.value = false;
    open.value = false;
  }, 1000);
};

const success = (msg) => {
  message.success(msg);
};

</script>


<style lang="scss" scoped>
.student {
  margin: 5px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

  .a-button {
    margin-left: 10px;
  }
}


.highlight {
  background-color: rgb(255, 192, 105);
}

.editable-cell {
  position: relative;

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
